<template>
  <BasicTable @register="registerTable" @selection-change="selectionChange">
    <template #toolbar>
      <LookProcess :taskId="taskId" :processId="processId" @close="reload"
        ><a-button v-auth="'processtasks:view'">{{ t('查看') }}</a-button></LookProcess
      >
    </template>

    <template #currentProgress="{ record }">
      <a-progress v-if="record.currentProgress" :percent="record.currentProgress" size="small" />
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
  import userTaskTable from './../../hooks/userTaskTable';

  import LookProcess from './../LookProcess.vue';

  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { getSchemaTask } from '/@/api/workflow/process';
  import { TaskTypeUrl } from '/@/enums/workflowEnum';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const configColumns: BasicColumn[] = [
    {
      title: t('流水号'),
      dataIndex: 'serialNumber',
      width: 50,
      sorter: true,
    },
    {
      title: t('流程名称'),
      dataIndex: 'processName',
      width: '32%',
      align: 'left',
    },
    {
      title: t('任务名称'),
      dataIndex: 'taskName',
      sorter: true,
      width: '17%',
      align: 'left',
    },
    {
      title: t('当前进度'),
      dataIndex: 'currentProgress',
      sorter: true,
      width: '17%',
      slots: { customRender: 'currentProgress' },
    },
    {
      title: t('发起人'),
      dataIndex: 'originator',
      align: 'left',
      width: 80,
    },
    {
      title: t('发起时间'),
      width: 120,
      dataIndex: 'createTime',
      align: 'left',
    },
  ];
  const { formConfig, processId, taskId, selectionChange } = userTaskTable();
  const [registerTable, { reload }] = useTable({
    title: t('我的传阅列表'),
    api: getSchemaTask,
    rowKey: 'taskId',
    columns: configColumns,
    formConfig: formConfig(),
    beforeFetch: (params) => {
      return { data: params, taskUrl: TaskTypeUrl.CIRCULATED };
    },
    rowSelection: {
      type: 'radio',
    },
    useSearchForm: true,
    showTableSetting: true,
    striped: false,
    pagination: {
      pageSize: 18,
    },
  });
</script>

<style scoped></style>
